@charset "utf-8";

@import "common";
$width:100%;
@mixin total-dl{
    
}
ul{
    list-style: none;
}
a{
    background-color: transparent;
    text-decoration: none;
}
body{
    font-family: LATO-REGULAR,"Helvetica Neue",Arial,"Microsoft Yahei",Helvetica,sans-serif;
}
.content-cart{
   width: $width;
   background-color:#EFEFEF ;
   .main-c{
       max-width: 1200px;
       margin: 0 auto;
//     text-align: left;
       .main-top{
           padding: 50px 0;
           max-width: 1000px;
           margin: 0 auto;
           
           .top-line{
               border-bottom: 1px solid #CCCCCC;
               position: relative;
               height: 40px;
               .line-name{
                   color: #CCCCCC;
                   position: absolute;
                   top: 0;
                   width: 80px;
                   margin-left: -40px;
                   text-align: center;
                   font-size: 14px;
               }
               .is-on{
                    color: #EB0028;
                 }  
               .name-1{
                   left: 25%;
               }
               .name-2{
                   left: 50%;
               }
               .name-3{
                   left: 75%;
               }
               .red-line{
                   position: absolute;
                   height: 2px;
                   left: 0;
                   bottom: -2px;
                   background-color: #EB0028;
                   width: 37.5%;
               }
               .line-circular{
                   position: absolute;
                   bottom: -6px;
                   margin-left: -5px;
                   height: 10px;
                   width: 10px;
                   -webkit-border-radius: 50%;
                   border-radius: 50%;
                   background: #CCCCCC;
               }
               .active{
                   background: #EB0028;
               }
           } 
       }
       .goods-box{
               font-size: 14px;
               width: $width;
               .list-head{
                   color: #CCCCCC;
                   height: 50px;
                   line-height: 50px;
                   background: #34373d;
                   font-size: 12px;
                   border-bottom: 1px solid #DFDFDF;
                   padding-left: 20.17544%;
                   padding-right: 4.16667%;
                   border-top-left-radius:2px;
                   border-top-right-radius: 2px;
               }
           }
           .goods-list{
               p{
                   line-height: 1.6;
               }
               li{
                   &:first-child{
                        .main-info{
                           display: inline-block;
                           font-size: 16px;
                           color: #212121;
                           padding-left: 20px;
                           line-height: 24px;
                           a{
                               color: #10181f;
                           }
                       }
                   }
               }
               .head-caption li, .cart-product li{
                   float: left;
                   width: 18.9011%;
                   text-align: center;
                   &:first-child{
                       width: 38.68132%;
                       text-align: left;
                       position: relative; 
                   }
                   &:last-child{
                       width: 4.3956%;
                   }
               }
               .head-caption{
                  
                   span{
                       margin-left: -46.74221%;
                   }
               }
               .list-body{
                   background: #FFFFFF;
                   position: relative;
                   .main-goods{
                       margin: 0 2.5%;
                       padding-left: 17.54386%;
                       padding-right: 1.75439%;
                       padding-bottom: 20px;
                       position: relative;
                       color: #333333;
                       .cart-product{
                           position: relative;
                           li{
                               padding-top: 53px;
                               padding-bottom: 35px;
                               position: relative;
                           }
                           .price{
                               display: table;
                               div{
                                   display: table-cell;
                                   vertical-align: middle;
                               }
                           }
                       }
                       .goods-img{
                           width: 100px;
                           position: absolute;
                           left: -52.40793%;
                           top: 20px;
                           border: none;
                       }
                       
                   }
               }
               .goods-num{
                   position: relative;
                   display: inline-block;
                   height: 25px;
                   line-height: 25px;
                   width: 85px;
                   border: 1px solid #DFDFDF;
                   border-radius: 2px;
                   margin-top: -2px;
                   text-align: center;
                   color: #333333;
                   font-size: 12px;
               }
               .goods-minus,.goods-plus{
                   width: 24px;
                   height: 23px;
                   border: 1px solid #f9f9f9;
                   border-radius: 2px;
               }
               .goods-minus span,.goods-plus span{
                   position: absolute;
                   top: 11px;
                   left: 8px;
                   height: 2px;
                   width: 10px;
                   background: #CCCCCC;
               }
               .goods-minus{
                       position: absolute;
                       top: 0;
                       left: 0;
                       cursor: pointer;
                       border-right: none;
                   }
                .goods-plus{
                       position: absolute;
                       top: 0;
                       right: 0;
                       cursor: pointer;
                       border-left: none;
                       span{
                           &:first-child{
                               top: 7px;
                               left: 12px;
                               height: 10px;
                               width: 2px;
                           }
                       }
                }
                .delete-btn{
                    display: inline-block;
                    background-image: url(../img/cart-icons.png);
                    background-repeat: no-repeat;
                    background-position: 0 -126px;
                    width: 16px;
                    height: 19px;
                    cursor: pointer;
                }
                .total-panle{
                    padding: 10px 0 30px;
                    position: relative;
                    background: #FFFFFF;
                    border-top: 1px solid #DFDFDF;
                }
                .total-list{
                    float: right;
                    text-align: right;
                    font-size: 14px;
                    margin-right: 4.16667%;
                    width: 410px;
                    dl dd,dl dt{
                        width: 50%;
                        padding-top: 10px;
                    }
                    .selected{
                        color: #999;
                        position: absolute;
                        left: 0;
                        top: 17px;
                        font-size: 12px;
                        margin-left: 4.16667%;
                    }
                    dl{
                        line-height: 1.6;
                    }
                    dl dt{
                        float: left;
                        color: #999999;
                        font-size: 12px;
                        text-align: left;
                        
                    }
                    dl dd{
                        float: right;
                        color: #333333;
                        text-align: right;
                    }
                    .amount{
                        border-top: 1px solid #DFDFDF;
                        margin-top:10px;
                        dt{
                            margin-top: 10px;
                            font-size: 14px;
                            color: #333333;
                        }
                        dd{
                            font-size: 30px;
                            vertical-align: bottom;
                            font-family: lato,"Microsoft Yahei";
                        }
                    }
                    .checkout-btn-bar{
                        width: $width;
                        padding-top: 10px;
                    }
                    .go-store-btn{
                        display: inline-block;
                        width: 198px;
                        height: 48px;
                        line-height: 48px;
                        text-align: center;
                        cursor: pointer;
                        font-size: 14px;
                        background: 0 0;
                        color: #333333;
                        border: 1px solid #d6d6d6;
                        border-radius: 2px;
                        position: relative;
                        float: left;
                        z-index: 1;
                        transition: color .15s ease 0s;
                    }
                    #goorderbtn{
                        display: inline-block;
                        width: 198px;
                        height: 48px;
                        line-height: 48px;
                        text-align: center;
                        cursor: pointer;
                        font-size: 14px;
                        background: #EB0028;
                        color: #FFFFFF;
                        border: 1px solid #d70226;
                        border-radius: 2px;
                        position: relative;
                        float: right;
                        z-index: 1;
                        transition: color .15s ease 0s;
                    }
                }
           }
           .setion-bottom{
                padding: 22px 0;
                background: #F9F9F9;
//                          font-family: 'Microsoft YaHei',Arial,sans-serif;
                font-size: 12px;
                .bottom{
                    width: $width;
                    max-width: 1200px;
                    margin: 0 auto;
//                  border-bottom: 1px solid #ececec;
                    li{
                        width: 24%;
                        display: $div;
                        font-size: 16px;
                        text-align: center;
//                      padding: 35px 0;
                    }
                    span{
                        display: block;
                        padding-top: 15px;
                    }
                }
                .bottom-7{
                    background: url(../img/footer.png) no-repeat;
                    display: $div;
                    background-position: 0 -920px;
                    height: 80px;
                    width: 80px;
                }
                .bottom-15{
                    display: $div;
                    height: 80px;
                    width:80px;
                    background: url(../img/footer.png) no-repeat;
                    background-position: 0 -640px;
                }
                .bottom-30{
                    display: $div;
                    height: 80px;
                    width:80px;
                    background: url(../img/footer.png) no-repeat;
                    background-position: 0 -800px;
                }
                .bottom-99{
                    display: $div;
                    height: 80px;
                    width:80px;
                    background: url(../img/footer.png) no-repeat;
                    background-position: 0 -1040px;
            }
        }
   }
   .like-goods{
            color: #333333;
            text-align: center;
            font-size: 14px;
            .like-title{
                font-size: 18px;
                padding: 60px 0 40px;
            }
            .like-goods-box{
                position: relative;
                width: $width;
                max-width: 1200px;
                margin: 0 auto;
                margin-bottom: 110px;
                .like-content{
                    width: $width;
                    overflow: hidden;
                    position: relative;
                    height: 380px;
                    ul{
                        width: 715%;
                        position: relative;
                        transition-duration:0s ;
                        transform: translate3d(0px,0px,0px);
                    }
                    li{
                        float: left;
                        width: 285px;
                        margin-right: 20px;
                        position: relative;
                        text-align: center;
                        background: #FFFFFF;
                        padding: 10px 0 30px;
                    }
                    .name-price{
                        padding: 20px 0;
                        font-size: 14px;
                    }
                    .goods-price{
                        display: inline-block;
                        color: #79797b;
                    }
                    .goods-name{
                        margin-bottom: 10px;
                    }
                    .go-to-cart{
                        display: inline-block;
                        width: 195px;
                        height: 38px;
                        line-height: 38px;
                        text-align: center;
                        cursor: pointer;
                        font-size: 14px;
                        background: 0 0;
                        color: #EB0028;
                        border: 1px solid #EB0028;
                        border-radius: 0;
                        position: relative;
                        transition: color .15s ease 0s;
                        z-index: 1;
                        &:hover{
                            color: #FFFFFF;
                            &:before{
                                width: 197px;
                            }
                        }
                        &:before{
                            position: absolute;
                            top: -1px;
                            left: -1px;
                            width: 0;
                            height: 40px;
                            background: #EB0028;
                            content: "";
                            z-index: -1;
                            transition: width .15s ease 0s;
                        }
                    }
                }
                .bx-prev{
                        background-image:url(../img/cart-icons.png) ;
                        background-repeat: no-repeat;
                        width: 21px;
                        height: 40px;
                        background-position: 0 -551px;
                        position: absolute;
                        top: 50%;
                        left: -41px;
                        margin-top: -20px;
                        text-indent: -999em;
                        overflow: hidden;
                    }
                .bx-next{
                    background-image:url(../img/cart-icons.png) ;
                        background-repeat: no-repeat;
                        width: 21px;
                        height: 40px;
                        background-position: 0 -511px;
                        position: absolute;
                        top: 50%;
                        right: -41px;
                        margin-top: -20px;
                        text-indent: -999em;
                        overflow: hidden;
                }
            }
        } 
}
.clearfix{
      &:before{
           content: "";
           display: table;
           font:0/0 a;
           height: 0;
           overflow: hidden;
       }
       &:after{
           content: "";
           display: table;
           font:0/0 a;
           height: 0;
           overflow: hidden;
           clear: both;
       }
}
.clearfix2{
    &:after{
           content: "";
           display: block;
//         font:0/0 a;
           height: 0;
           overflow: hidden;
           clear: both;
       }
}
